<template>
    <div>
        <!--主题-->
        <div class="app-card">
            <div class="app-card-header">主题</div>
            <div class="app-card-body">
                <!-- 主题选择 -->
                <a-list size="small">
                    <a-list-item v-if="store.skin">
                        <span>主题选择</span>
                        <template #actions>
                            <a-select
                                    size="small"
                                    class="item-select"
                                    placeholder="请选择" @change="skinChange"
                                    v-model:value="store.skin.value"
                            >
                                <a-select-option v-for="item in store.skin.list" :value="item.value">{{item.label}}
                                </a-select-option>
                            </a-select>
                        </template>
                    </a-list-item>
                </a-list>
                <a-divider/>
                <!-- 默认主题设置 -->
                <DefaultSetting v-if="store.skin.value == 'default'"></DefaultSetting>
                <!-- 第一主题设置 -->
                <FirstSetting v-if="store.skin.value == 'first'"></FirstSetting>
                <!-- 列表主题设置 -->
                <ListSetting v-if="store.skin.value == 'listSkin'"></ListSetting>
                <!-- demo主题设置 -->
                <DemoSetting v-if="store.skin.value == 'demo'"></DemoSetting>
            </div>
        </div>
        <!--壁纸-->
        <div class="app-card">
            <div class="app-card-header">壁纸
                <a-switch class="header-setting" size="small" v-model:checked="store.background.state"
                          @change="backgroundStateChange"/>
            </div>
            <div class="app-card-body" v-if="store.background.state">
                <div class="wallpaper-wrap">
                    <a-row>
                        <a-col :span="8" v-for="(item, index) in store.background.list" :key="index">
                            <div class="wallpaper-item" @click="backgroundChange(item.value, index)"
                                 :class="store.background.value == item.value ? 'active' :''">
                                <img class="img-thumbnail" :src="item.dft" alt=""
                                     v-if="item.value == 'main' || item.value == 'local'"/>
                                <div class="img-thumbnail" :style="'background: ' + item.dft" v-else></div>
                                <div>{{item.label}}</div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <a-divider/>
                <!--壁纸库-->
                <a-list size="small" v-if="store.background.value == 'main'">
                    <a-list-item>
                        <span>壁纸</span>
                        <template #actions>
                            <a-button type="link" @click="nextPic">下一张</a-button>
                        </template>
                    </a-list-item>
                    <a-list-item>
                        <span>模糊</span>
                        <template #actions>
                            <a-slider
                                    v-model:value="store.background.main.filter"
                                    :min="0"
                                    :max="100"
                                    style="width: 150px"
                                    @change="filterChange"/>
                        </template>
                    </a-list-item>
                    <!--<a-list-item>
                        <span>更换频率</span>
                        <template #actions>
                            <a-select size="small" class="item-select" placeholder="请选择">
                                <a-select-option :value="0">从不</a-select-option>
                                <a-select-option :value="1">1小时</a-select-option>
                                <a-select-option :value="2">3小时</a-select-option>
                                <a-select-option :value="3">6小时</a-select-option>
                                <a-select-option :value="4">12小时</a-select-option>
                                <a-select-option :value="5">24小时</a-select-option>
                            </a-select>
                        </template>
                    </a-list-item>-->
                </a-list>
                <!--纯色-->
                <a-list size="small" v-if="store.background.value == 'pure'">
                    <!--<a-list-item>
                        <span>颜色</span>
                        <template #actions>
                            <a-select size="small" class="item-select" placeholder="请选择">
                                <a-select-option :value="1">红色</a-select-option>
                                <a-select-option :value="2">绿色</a-select-option>
                                <a-select-option :value="3">蓝色</a-select-option>
                            </a-select>
                        </template>
                    </a-list-item>-->
                    <a-list-item>
                        <span>选择</span>
                        <template #actions>
                            <a-input
                                    size="small"
                                    type="text"
                                    placeholder="输入16进制值"
                                    v-model:value="store.background.pure.value"
                            ></a-input>
                        </template>
                    </a-list-item>
                </a-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {getConfig} from "/src/util";

    // 各个主题内单独设置
    import DefaultSetting from '/src/components/skin/default/Setting.vue';
    import FirstSetting from '/src/components/skin/first/Setting.vue';
    import ListSetting from '/src/components/skin/list/Setting.vue';
    import DemoSetting from '/src/components/skin/demo/Setting.vue';

    export default {
        name: "Theme",
        // 组件
        components: {
            DefaultSetting,
            FirstSetting,
            ListSetting,
            DemoSetting,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,

                config: getConfig(),
                // skin: getConfig('skin'),
                // background: getConfig('background'),

                // 颜色
                // color: {
                //     state: true,
                //     value: '000000',
                // },
            }
        },
        // DOM未渲染前调用
        created() {
            this.init();
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // init
            init() {
                let that = this;
            },
            // 主题(模式)
            skinChange(value) {
                let that = this,
                    skin = that.store.skin;

                skin.value = value;
                this.$store.commit('setSkin', skin);
            },
            // 壁纸(模式)
            backgroundChange(value, index) {
                let that = this,
                    background = that.store.background;

                background.value = value;
                this.$store.commit('setBackground', background);
                this.$store.commit('setEvent', 'init');
            },
            // 壁纸开关
            backgroundStateChange(value) {
                let that = this,
                    background = that.store.background;

                background.state = value;
                this.$store.commit('setBackground', background);
            },
            // 壁纸(下一张)
            nextPic() {
                this.$store.commit('setEvent', 'next');
            },
            // 壁纸(模糊度)
            filterChange(value) {
                let that = this,
                    background = that.store.background;

                background.main.filter = value;
                this.$store.commit('setBackground', background);
                this.$store.commit('setEvent', 'init');
            },
        },
        watch: {
            'store.background.pure.value'(value, old) {
                let that = this,
                    len = parseInt(value.length || 0);

                if (len <= 7) {
                    let that = this,
                        background = that.store.background;

                    that.store.background.pure.value = value;
                    background[background.value].value = value;
                    this.$store.commit('setBackground', background);
                    this.$store.commit('setEvent', 'init');
                } else {
                    that.store.background.pure.value = old;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    @activeColor: #1890ff;

    .app-card {
        margin-bottom: 15px;
    }

    .wallpaper-wrap {
        margin-bottom: 10px;

        .wallpaper-item {
            padding: 2px;
            margin: 10px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            border: 1px solid transparent;

            &.active {
                border: 1px solid @activeColor;

                div {
                    color: @activeColor;
                }
            }

            .img-thumbnail {
                width: 100%;
                height: 55px;
                border-radius: 4px;
            }

            div {
                height: 20px;
                line-height: 20px;
            }
        }
    }
</style>
